<script lang="ts" setup>
    import {ref} from "vue";

    defineProps<{
        item:{id:number,name:string}[]
    }>()

</script>

<template>
    <header style="border: 2px solid navy;width: 200px;margin: auto;text-align: center;border-radius: 10px;background-color: chartreuse;">
        <slot name="header" :num="item.length">
            <h1>总数:{{ item.length }}</h1>
        </slot>
    </header>

    <ul>
        <li v-for="(i,n) in item" :key="n">
            <slot :item="i" :index="n">
                {{ i.id }}:{{ i.name }}
            </slot>
        </li>
    </ul>

    <footer>
        <slot name="footer">
            <div style="width: 200px;margin: auto;border: 1px solid black;text-align: center;">
                <h2>F00T3r</h2>
            </div>
        </slot>
    </footer>
</template>

<style scoped>
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        list-style-type: none;
    }
</style>